<template>
  <div class="app-container">
    <div class="filter-container">
      <span style="float:left;width:30%;">
        <el-input v-model="listQuery.condition" :disabled="btnDisabled" placeholder="请输入查询条件" clearable
          class="filter-item" />
      </span>
      <span style="float:left;margin-left: 10px;">
        <el-button @click="handleFilter" :disabled="btnDisabled" class="filter-item" type="primary" size="small" v-waves
          icon="el-icon-search">查询</el-button>
        <el-button @click="handleCreate" :disabled="btnDisabled" class="filter-item" type="primary" size="small" v-waves
          icon="el-icon-plus">添加</el-button>
      </span>
    </div>

    <el-table :data="codeList" v-loading="listLoading" border fit highlight-current-row
      style="width: 100%;height: 100%;">
      <el-table-column align="center" prop="dictId" label="关键字" width="300"></el-table-column>
      <el-table-column align="center" prop="code" sortable label="编码" width="150"></el-table-column>
      <el-table-column align="center" prop="name" sortable label="名称"></el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleUpdate(scope.row)" size="small" type="success" v-waves icon="el-icon-edit">编辑
          </el-button>
          <el-button :disabled="scope.row.type==1" @click="handleDelete(scope.row)" size="small" type="danger" v-waves
            icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page" :page-sizes="[5,10,20]" :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>

    <!-- 添加 修改 -->
    <add v-if="showAdd" @flushList="flushList" @closeDialog="closeDialog" :showAdd="showAdd" :btnType="btnType"
      :formData="codeData" />

  </div>
</template>

<script>
  import {
    codePageList,
    deleteCode,
  } from '@/api/sys/dict/index';

  import * as common from '@/utils/base/common'

  /* 组件 */
  import add from './components/code-add'

  export default {
    /* 数据字典从表 */
    name: 'base-code',
    data() {
      return {
        listLoading: false,
        btnDisabled: true,
        total: null,
        listQuery: {
          page: 1,
          pageSize: 10,
          dict_id: '',
          condition: ''
        },
        codeList: null,

        /* 添加 修改 相关数据 */
        showAdd: false,
        btnType: '', // 当前页面类型 [create update search]
        codeData: null,

      }
    },
    components: {
      add
    },
    methods: {

      getCodeList(dictId) {
        this.listQuery.dict_id = dictId
        this.btnDisabled = false
        this.codePageList()
      },

      initData() {
        this.listQuery.dict_id = ''
        this.btnDisabled = true
        this.codePageList()
      },

      codePageList() {
        this.codeList = null
        this.total = null
        if (this.listQuery.dict_id != '') {
          this.listLoading = true
          codePageList(this.listQuery).then(response => {
            this.codeList = response.data.records
            this.total = response.data.total
            this.listLoading = false;
          }).catch(err => {
            this.listLoading = false;
            common.message(this, 'error', 2, '调用接口失败!')
            console.error(err)
          })
        }
      },

      // 刷新从表页面
      flushList() {
        this.closeDialog()
        this.codePageList()
      },

      //关闭弹出框
      closeDialog() {
        this.showAdd = false
      },

      // 点击 添加
      handleCreate() {
        this.codeData = {
          dictId: this.listQuery.dict_id
        }
        this.showAdd = true;
        this.btnType = 'create';
      },
      // 点击 修改
      handleUpdate(row) {
        this.codeData = row
        this.showAdd = true;
        this.btnType = 'update';
      },
      // 点击 删除
      handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCode(row).then(response => {
            if (response.code === 200) {
              common.message(this, 'success', 2, '删除数据成功!')
              this.codePageList()
            } else {
              common.message(this, 'warning', 2, response.message)
            }
          }).catch(err => {
            common.message(this, 'error', 2, '删除数据失败!')
            console.error(err)
          })

        }).catch(() => {

        })
      },

      handleFilter() {
        if (this.listQuery.dictId != '') {
          this.listQuery.page = 1
          this.codePageList();
        }
      },

      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.codePageList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.codePageList();
      },

    }
  }
</script>

<style scoped>
  @import "~@/styles/list.css";
</style>
